{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% load widget_tweaks %}

{% block title %}{{ title }} - 教务信息管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>
                <i class="fas fa-user-plus me-2 text-primary"></i>
                {{ title }}
            </h2>
            <a href="{% url 'accounts:user_list' %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-1"></i>返回用户列表
            </a>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8 col-md-10 mx-auto">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h5 class="card-title mb-0">
                    <i class="fas fa-user-cog me-2"></i>
                    用户信息
                </h5>
            </div>
            <div class="card-body">
                <form method="post" novalidate>
                    {% csrf_token %}
                    
                    {% if form.non_field_errors %}
                        <div class="alert alert-danger">
                            {{ form.non_field_errors }}
                        </div>
                    {% endif %}
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.username.id_for_label }}" class="form-label">
                                    <i class="fas fa-user me-1"></i>用户名 <span class="text-danger">*</span>
                                </label>
                                {{ form.username|add_class:"form-control" }}
                                {% if form.username.errors %}
                                    <div class="text-danger small mt-1">
                                        {{ form.username.errors }}
                                    </div>
                                {% endif %}
                                <div class="form-text">用户登录时使用的用户名</div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.first_name.id_for_label }}" class="form-label">
                                    <i class="fas fa-id-card me-1"></i>姓名 <span class="text-danger">*</span>
                                </label>
                                {{ form.first_name|add_class:"form-control" }}
                                {% if form.first_name.errors %}
                                    <div class="text-danger small mt-1">
                                        {{ form.first_name.errors }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.email.id_for_label }}" class="form-label">
                                    <i class="fas fa-envelope me-1"></i>邮箱 <span class="text-danger">*</span>
                                </label>
                                {{ form.email|add_class:"form-control" }}
                                {% if form.email.errors %}
                                    <div class="text-danger small mt-1">
                                        {{ form.email.errors }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.role.id_for_label }}" class="form-label">
                                    <i class="fas fa-user-tag me-1"></i>用户角色 <span class="text-danger">*</span>
                                </label>
                                {{ form.role|add_class:"form-select" }}
                                {% if form.role.errors %}
                                    <div class="text-danger small mt-1">
                                        {{ form.role.errors }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-3" id="college-field" style="display: none;">
                        <label for="{{ form.college_name.id_for_label }}" class="form-label">
                            <i class="fas fa-university me-1"></i>学院名称 <span class="text-danger">*</span>
                        </label>
                        {{ form.college_name|add_class:"form-control" }}
                        {% if form.college_name.errors %}
                            <div class="text-danger small mt-1">
                                {{ form.college_name.errors }}
                            </div>
                        {% endif %}
                        <div class="form-text">仅二级学院使用者需要填写</div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.password1.id_for_label }}" class="form-label">
                                    <i class="fas fa-lock me-1"></i>密码 <span class="text-danger">*</span>
                                </label>
                                {{ form.password1|add_class:"form-control" }}
                                {% if form.password1.errors %}
                                    <div class="text-danger small mt-1">
                                        {{ form.password1.errors }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.password2.id_for_label }}" class="form-label">
                                    <i class="fas fa-lock me-1"></i>确认密码 <span class="text-danger">*</span>
                                </label>
                                {{ form.password2|add_class:"form-control" }}
                                {% if form.password2.errors %}
                                    <div class="text-danger small mt-1">
                                        {{ form.password2.errors }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <!-- 隐藏激活用户选项，默认为激活状态 -->
                    {{ form.is_active|add_class:"d-none" }}
                    
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{% url 'accounts:user_list' %}" class="btn btn-secondary me-md-2">
                            <i class="fas fa-times me-1"></i>取消
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>创建用户
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const roleField = document.getElementById('{{ form.role.id_for_label }}');
    const collegeField = document.getElementById('college-field');
    
    function toggleCollegeField() {
        if (roleField.value === 'college') {
            collegeField.style.display = 'block';
        } else {
            collegeField.style.display = 'none';
        }
    }
    
    // 初始化显示状态
    toggleCollegeField();
    
    // 监听角色变化
    roleField.addEventListener('change', toggleCollegeField);
});
</script>
{% endblock %}